<template>
	<view class="" style="padding: 0rpx 40rpx;">
		<view class="address-box">
			<view class="address" @click="Address">
				<text class="iconfont icon-location" style="font-size: 50rpx; margin-right: 20rpx;"></text>
				<view class="" v-if="show">
					添加收货地址
				</view>
				<view class="" v-else>
					<view class="address-name" >
						{{address_info.name}} {{address_info.mobile}}
					</view>
					<view class="" style="font-size: 24rpx;">
						{{address_info.region+address_info.address}}
					</view>
				</view>
			</view>
			<text class="iconfont icon-right" style="font-size: 40rpx;"></text>
		</view>
		<SplitLine backgroundColor="#eeeeee" :width="100" :height="2"></SplitLine>
		<scroll-view class="scroll" scroll-y="true">
			<view class="title">
				订单数量（{{shoplist.length}}件）
			</view>
			<ShopCarItem mode="shop" v-for="(item,index) in shoplist" :key="index" :Data="item">
				<view class="">
					x{{item.cart_num}}
				</view>
			</ShopCarItem>
		</scroll-view>
		<SplitLine backgroundColor="#eeeeee" :width="100" :height="2"></SplitLine>
		<view class="discount-info">
			<view class="" style="width: 100%;">
				<view class="content">
					<view class="">
						商品金额
					</view>
					<view class="coupon-box">
						￥{{total_price}}
					</view>
				</view>
				<view class="content coupon">
					<view class="">
						优惠券抵扣
					</view>
					<view class="coupon-box"  @click="goCoupon">
						<view class="coupon-box" v-if="coupon_show">
							无
						</view>
						<view class="coupon-price" v-else>
							-{{coupon_price}}
						</view>
						<text class="iconfont icon-right" style="font-size: 40rpx;"></text>
					</view>
					
				</view>
				<view class="content">
					<view class="">
						支付方式
					</view>
					<view class="coupon-box" @click="visible=true">
						<view class="payment">
							{{payment}}
						</view>
						<text class="iconfont icon-right" style="font-size: 40rpx;"></text>
					</view>
					
				</view>
				<view class="content total">
					<view class="">
						合计
					</view>
					<view class="coupon-box">
						￥{{pay_price}}
					</view>
				</view>
			</view>
		</view>
		<SplitLine backgroundColor="#eeeeee" :width="100" :height="2"></SplitLine>
		<SplitLine backgroundColor="#eeeeee" :width="100" :marginBottom="100" :height="2"></SplitLine>
		<view class="bottom">
			<view class="total-box">
				共需支付
				<view class="price">
					￥{{pay_price}}
				</view>
			</view>
			<Btn marked="立即付款" backgroundColor="#5C6B7E" :width="240" :height="70" :borderRadius="6" @click.native="pay"></Btn>
		</view>
		<Drawer mode="bottom" :visible="visible" @close="visible = false">
			<radio-group style="width: 100%;" @change="radioGroupChange">
				<view class="solt-wrap" style="width: 100%;">
					<view class="title">支付中心</view>
					<view class="pay-item  u-row-between u-border-bottom">
						<view class="">
							<text class="u-margin-left-15" style="color: #999999;">请选择支付方式</text>
						</view>
					</view>
					<label key="wxpay">
						<view class="pay-item  u-row-between u-border-bottom">
							<view class="u-flex">
								<image style="width: 50rpx;height: 50rpx;" src="../../static/Shop/weChat.png"></image>
								<text class="u-margin-left-15">微信支付</text>
							</view>
							<radio :value="'wxpay'" color="#FF9000" :checked="selectPay === 'wxpay'" />
						</view>
					</label>
					<label key="alipay">
						<view class="pay-item x u-row-between u-border-bottom">
							<view class="u-flex">
								<image style="width: 50rpx;height: 50rpx;" src="../../static/Shop/alipay.png"></image>
								<text class="u-margin-left-15">支付宝支付</text>
							</view>
							<radio :value="'alipay'" color="#FF9000" :checked="selectPay === 'alipay'" />
						</view>
					</label>
					<label key="wallet">
						<view class="pay-item  u-row-between u-border-bottom">
							<view class="u-flex">
								<image style="width: 50rpx;height: 50rpx;" src="../../static/Shop/wallet.png"></image>
								<text class="u-margin-left-15">余额</text>
							</view>
							<radio :value="'wallet'" color="#FF9000" :checked="selectPay === 'wallet'" />
						</view>
					</label>
					<view class="pay-btn" style="width: 90%;" @click="payBtn">
						确认
					</view>
				</view>
				</radio-group>
		</Drawer>
	</view>
</template>
<script>
	import Btn from "../../components/bw-Btn/bw-btn.vue"
	import SplitLine from "../../components/bw-Split-line/bw-Split-line.vue"
	import tuiSwipeAction from "../../components/bw-swipe-action/bw-swipe-action.vue"
	import ShopCarItem from "../shop/components/bw-shopCar-Item.vue"
	import {orderConfirm,orderPay,couponDetail} from "../../api/order.js";
	import {addresseinfo} from "../../api/mine.js";
	import Drawer from "../shop/components/bw-drawer.vue";
	let providerList = []; // 支付通道
	export default{
		components:{
			Btn,
			SplitLine,
			tuiSwipeAction,
			ShopCarItem,
			Drawer
		},
		data(){
			return {
				show:true,
				shoplist:[
					
				],
				payment:"余额",
				pay_type:0,
				selectPay:"wallet",
				total_price:0,
				coupon_price:0,
				cart_ids:"",
				order_key:"",
				pay_price:0,
				address_info:{},
				address_id:"",
				order_id:"",
				coupon_id:"",
				coupon_info:{},
				coupon_show:true,
				coupon_price:0,
				providerList:[],
				visible:false,
				
			}
		},
		async onLoad(point) {
			if(!point.ids){
				//确认订单信息
				await orderConfirm({
					cart_ids:88
				}).then(res=>{
					this.shoplist=res.data.cart_info
					this.order_key=res.data.order_key
					this.shoplist.forEach(item=>{
						 this.total_price+=Number(item.total_price)
					})
					console.log(this.total_price)
					this.pay_price=this.total_price-this.coupon_price
				})
			}
			else{
				//确认订单信息
				await orderConfirm({
					cart_ids:point.ids
				}).then(res=>{
					this.shoplist=res.data.cart_info
					this.order_key=res.data.order_key
					this.shoplist.forEach(item=>{
						 this.total_price+=Number(item.total_price)
					})
					console.log(this.total_price)
					this.pay_price=this.total_price-this.coupon_price
				})
			}
			this.cart_ids=point.ids;
			//获取地址详情
			if(point.addressId){
				this.address_id=point.addressId
				await addresseinfo({
					id:this.address_id
				}).then(res=>{
					this.address_info=res.data
					this.show=false
				})
			}
			console.log(this.address_info)
			
			//获取优惠券详情
			if(point.couponId){
				this.coupon_id=point.couponId
				await couponDetail({
					id:this.coupon_id
				}).then(res=>{
					this.coupon_info=res.data
					this.coupon_show=false
					if(res.data.coupons.type==1){
						let str=Number(res.data.coupons.coupon_rate)/100*Number(this.total_price)*100
						str=str.toString().split(".")[0]
						console.log(str)
						if(str.charAt(str.length - 1)>=0&&str.charAt(str.length - 1)<5){
							this.pay_price=Math.floor(Number(res.data.coupons.coupon_rate)/100*Number(this.total_price)*100)/100
							 this.coupon_price=Math.ceil((this.total_price-this.pay_price)*100)/100
						}
						else{
							this.pay_price=Math.ceil(Number(res.data.coupons.coupon_rate)/100*Number(this.total_price)*100)/100
							this.coupon_price=Math.floor((this.total_price-this.pay_price)*100)/100
						}	
					}
					if(res.data.coupons.type==0){
						this.pay_price=Math.floor((Number(this.total_price)-Number(res.data.coupons.coupon_price))*100)/100
						this.coupon_price=Math.floor((this.total_price-this.pay_price)*100)/100
					}
				})
			}
			// 获取支付通道
			uni.getProvider({
			    service: 'payment',
			    success:  (res) => {
					console.log(res.provider)
					this.providerList = res.provider
			    }
			});
		}, 
		methods:{
			pay(){
				console.log(this.address_id)
				if(this.address_id==""){
					uni.showToast({
						title:"请选择收货地址",
						icon:"none"
					})
				}
				else{
					//余额支付
					if(this.pay_type==0){
						orderPay({
							order_key:this.order_key,
							pay_type:0,
							counpon_id:this.coupon_id,
							is_distribution:1,
							distribution_address_id:this.address_id
						}).then(res=>{
							this.order_id=res.data.order_no
							uni.navigateTo({
								url:'/pages/orderPay/cancelPay?order_id='+this.order_id+"&&name=circle-fill",
							})
						}).catch(err=>{
							uni.navigateTo({
								url:'/pages/orderPay/cancelPay?order_id='+this.order_id+"&&name=close-fill",
							})
						})
					}else{
						//第三方支付
						orderPay({
							order_key:this.order_key,
							pay_type:this.pay_type,
							// counpon_id:0,
							is_distribution:0,
							distribution_address_id:this.address_id
						}).then(res=>{
							this.order_id=res.data.order_no
							// #ifdef APP-PLUS
							// app唤起支付界面
							uni.requestPayment({
							    provider: this.selectPay,
							    orderInfo: res.data.pay_param, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
							    success:  (res) =>{
									console.log("支付成功")
									//支付成功跳转
									// console.log('fail:' + JSON.stringify(res))
									uni.navigateTo({
										url:'/pages/orderPay/cancelPay?order_id='+this.order_id+"&&name=circle-fill",
									})
							    },
							    fail:  (err) => {
							        uni.navigateTo({
							        	url:'/pages/orderPay/cancelPay?order_id='+this.order_id+"&&name=close-fill",
							        })
							    }
							});
							// #endif
						})
					}
				}
			},
			goCoupon(){
				uni.navigateTo({
					url:"/pages/shop/coupon?ids="+this.cart_ids+"&&addressId="+this.address_id
				})
			},
			Address(){
				uni.navigateTo({
					url:"/pages/Mine/address/index?ids="+this.cart_ids+"&&couponId="+this.coupon_id
				})
			},
			radioGroupChange(e) {
				this.selectPay = e.detail.value;
				console.log(this.selectPay)
				if(e.detail.value=="wxpay"){
					this.payment="微信"
					this.pay_type=1
				}
				if(e.detail.value=="alipay"){
					this.payment="支付宝"
					this.pay_type=2
				}
				if(e.detail.value=="wallet"){
					this.payment="余额"
					this.pay_type=0
				}
				
			},
			payBtn(){
				this.visible=false
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../iconfont.scss";
	.address-box{
		width: 100%;
		height: 200rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.address{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.address-name{
				font-weight: bolder;
				margin-bottom: 10rpx;
			}
		}
	}
	.title{
		height: 100rpx;
		line-height: 100rpx;
		font-size: 34rpx;
		font-weight: bolder;
	}
	.discount-info{
		width: 100%;
		height: 240rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.content{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.coupon-box{
				width: 25%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
		.coupon{
			margin: 10rpx 0;
		}
		.total{
			font-weight: bolder;
			margin-top: 20rpx;
		}
	}
	.bottom{
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		border-top: 1px solid #D1D1D3;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		position: fixed;
		bottom: 0px;
		left: 0px;
		.total-box{
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-weight: bolder;
			.price{
				font-size: 32rpx;
				margin: 0 20rpx;
				color: #B31616;
			}
		}
	}
	.solt-wrap {
		padding: 0 35rpx;
		padding-bottom: 20rpx;
	
		.title {
			font-size: 32rpx;
			font-weight: 500;
			text-align: center;
			padding: 30rpx 0;
			padding-bottom: 15rpx;
		}
		.pay-item {
			height: 110rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.pay-btn {
			width: 100%;
			height: 76rpx;
			background-color: #FF9000;
			border-radius: 38rpx;
			text-align: center;
			line-height: 76rpx;
			color: #FFFFFF;
			margin-top: 50rpx;
		}
	}
	.u-flex{
		display: flex;
		justify-content: flex-start;
		.u-margin-left-15{
			margin-left: 30rpx;
		}
	}
	/deep/ .uni-radio-wrapper{
			margin-right: 100rpx; 
		}
</style>
